<template>
    <div :style="{
        boxSizing: 'border-box',
        width: '100%',
        padding: '80px',
        backgroundColor: 'var(--color-fill-2)',
    }">
        <a-row :gutter="20" :style="{ marginBottom: '20px' }">
            <a-col :span="12">
                <a-card title="全站十大" :hoverable="true" :bordered="false" :style="{ width: '100%', height: '320px' }">
                    <template #extra>
                        <a-link>More</a-link>
                    </template>
                    Card content
                </a-card>
            </a-col>
            <a-col :span="12">
                <a-card title="校园热点" :hoverable="true" :bordered="false" :style="{ width: '100%', height: '320px' }">
                    <template #extra>
                        <a-link>More</a-link>
                    </template>
                    Card content
                </a-card>
            </a-col>
        </a-row>

        <!-- 主页版面 -->
        <div style="margin-top: 120px;"></div>
        <a-row :gutter="20">
            <a-col :span="8">
                <a-card title="教务信息" :bordered="false" :style="{ width: '100%', height: '220px' }">
                    <template #extra>
                        <a-link href="/post/category/1">进入</a-link>
                    </template>
                    <!-- 渲染具体Info -->
                    <div v-for="item in articleInfo[0]" :key="item">
                        <div @click="gotoDetailPage(item.id)" class="itmeTitle">{{ item.title }}</div>
                    </div>

                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="乡情校谊" :bordered="false" :style="{ width: '100%', height: '220px' }">
                    <template #extra>
                        <a-link href="/post/category/2">进入</a-link>
                    </template>
                    <!-- 渲染具体Info -->
                    <div v-for="item in articleInfo[1]" :key="item">
                        <div @click="gotoDetailPage(item.id)" class="itmeTitle">{{ item.title }}</div>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="电脑网络" :bordered="false" :style="{ width: '100%', height: '220px' }">
                    <template #extra>
                        <a-link href="/post/category/3">进入</a-link>
                    </template>
                    <!-- 渲染具体Info -->
                    <div v-for="item in articleInfo[2]" :key="item">
                        <div @click="gotoDetailPage(item.id)" class="itmeTitle">{{ item.title }}</div>
                    </div>
                </a-card>
            </a-col>
        </a-row>



        <div style="margin-top: 100px;"></div>
        <a-row :gutter="20">
            <a-col :span="8">
                <a-card title="休闲娱乐" :bordered="false" :style="{ width: '100%', height: '220px' }">
                    <template #extra>
                        <a-link href="/post/category/4">进入</a-link>
                    </template>
                    <!-- 渲染具体Info -->
                    <div v-for="item in articleInfo[3]" :key="item">
                        <div @click="gotoDetailPage(item.id)" class="itmeTitle">{{ item.title }}</div>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="三角地带" :bordered="false" :style="{ width: '100%', height: '220px' }">
                    <template #extra>
                        <a-link href="/post/category/5">进入</a-link>
                    </template>
                    <!-- 渲染具体Info -->
                    <div v-for="item in articleInfo[4]" :key="item">
                        <div @click="gotoDetailPage(item.id)" class="itmeTitle">{{ item.title }}</div>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="二手市场" :bordered="false" :style="{ width: '100%', height: '220px' }">
                    <template #extra>
                        <a-link href="/post/category/6">进入</a-link>
                    </template>
                    <!-- 渲染具体Info -->
                    <div v-for="item in articleInfo[5]" :key="item">
                        <div @click="gotoDetailPage(item.id)" class="itmeTitle">{{ item.title }}</div>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
  
<script>
import http from '@/main';
import router from '@/router';
import { ref } from 'vue'
export default {
    methods: {
        // 去到具体的文章
        gotoDetailPage(artcleId) {
            console.log(artcleId)
            router.push('/post/detail/' + artcleId);
        }
    },
    setup() {
        let articleInfo = ref('');
        const getArticleInfo = () => {
            http.get('/articles/category/info')
                .then(res => { console.log(res.data); articleInfo.value = res.data; })
        }
        getArticleInfo();

        return {
            getArticleInfo, articleInfo,
        }
    }
}
</script>


<style scoped>
.itmeTitle {
    font-size: 16px;
    text-align: center;
    margin: 9px;
}

.itmeTitle:hover {
    cursor: pointer;
    color: darkblue;
}
</style>